<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"></meta>
    <meta name="keywords" content="keyword1,keyword2,keyword3"></meta>
    <meta name="description" content="this is my page"></meta>
    <meta name="content-type" content="text/html; charset=UTF-8"></meta>
    <title>上传文件</title>
</head>
<script src="https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.min.js"></script>

<body>
    <div>图片上传
        <input type="file" id="upload" accept="image/jpeg,image/png" multiple="multiple">
    </div>
    <div style="margin: 30px;">
        <button id="mUpload">上传</button>
        <span id="progress"></span>
    </div>
    <div id="imgBox">

    </div>
    <script>
        function setPreview(file) {
            var url = null;
            if (window.createObjectURL) {
                // basic
                url = window.createObjectURL(file);
            } else if (window.URL && typeof window.URL.createObjectURL == "function") {
                // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL) {
                // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        };
        //监听函数
        var xhrOnProgress = function (fun) {
            xhrOnProgress.onprogress = fun; //绑定监听
            //使用闭包实现监听绑
            return function () {
                //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                var xhr = $.ajaxSettings.xhr();
                //判断监听函数是否为函数
                if (typeof xhrOnProgress.onprogress !== 'function')
                    return xhr;
                //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                if (xhrOnProgress.onprogress && xhr.upload) {
                    xhr.upload.onprogress = xhrOnProgress.onprogress;
                }
                return xhr;
            }
        };
        var files = '';
        var previewList = [];
        $('#upload').on('change', function (e) {
            previewList = [];
            console.log(this.files)
            files = this.files;
            $('#imgBox').empty();
            for (var i = 0; i < files.length; i++) {
                previewList.push(setPreview(files[i]));
            }
            for (var i = 0; i < previewList.length; i++) {
                var img = $("<img>", { src: previewList[i] });
                console.log(img)
                $('#imgBox').append(img);
            }
        })
        $('#mUpload').on('click', function () {
            var formData = new FormData();
            for (var i = 0; i < files.length; i++) {
                formData.append("files", files[i]);
            }
            $.ajax({
                url: "http://192.168.3.234:9000/yijing/uploadFile/upload",
                data: formData,
                dataType: "json",
                type: "POST",
                processData: false,
                contentType: false,
                timeout: 300 * 1000,
                headers: {
                    "sign": "5a9374a01eafe7b1718bd5fafdc303e1",
                    "appToken": "haiNanSanYa/1.0/mobile/uuid/1522656403556"
                },
                success: function (res) {
                    console.log(res);
                    // alert('请求成功')
                },
                xhr: xhrOnProgress(function (e) {
                    var percent = Math.round(e.loaded * 100 / e.total) + '%'
                    console.log(percent);
                    $('#progress').text("上传进度" + percent);
                })
            })
        })

    </script>
</body>

</html>